<template>
    <div class="header" :class="{'bgColor':isLogo}">
        <router-link tag="div" to="/" class="iconfont back">&#xe620;</router-link>
        <ul>
            <li>商品</li>
            <li>评价</li>
            <li>详情</li>
        </ul>
        <div class="iconfont cart">&#xe617;</div>
    </div>
</template>

<script>
    export default{
        name:"DetailsHeader",
        data(){
            return{
                scroll:"",
                isLogo:false
            }
        },
        methods:{
            menu(){
                this.scroll = document.documentElement.scrollTop
                console.log(this.scroll)
                if(this.scroll>=60){
                    this.isLogo = true
                }else{
                    this.isLogo = false
                }
            }
        },
        mounted(){
            window.addEventListener("scroll",this.menu)
        }
    }
</script>

<style lang="stylus" scoped>
.header
    position fixed
    width 3.75rem
    height 0.44rem
    line-height 0.44rem  
    z-index 100
    .back
        position absolute
        top 0
        left 0.1rem
        width 0.3rem
        height 0.3rem
        line-height 0.3rem
        margin-top 0.07rem
        font-size 0.26rem
        opacity .7
    .cart
        position absolute
        top 0
        right 0.1rem
        width 0.3rem
        height 0.3rem
        line-height 0.3rem
        margin-top 0.07rem
        font-size 0.26rem
        opacity .7
    ul
        position absolute
        top 0
        left 0.4rem
        width 2.4rem
        height 0.44rem
        margin-left 0.275rem
        li
            float left
            width 0.8rem
            height 0.44rem
            text-align center
            color #999

.bgColor
    background-color #fff
</style>
